import React, { useState, useEffect } from 'react';
import './basicInfo.less';

import {
  Progress,
  Form,
  Input,
  Button,
  Cascader,
  DatePicker,
  Space,
  Upload,
  message,
  Select,
  Modal,
} from 'antd';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const { Option } = Select;
import {
  LoadingOutlined,
  InfoCircleOutlined,
  DeleteOutlined,
  MinusCircleOutlined,
  PlusOutlined,
  CloseCircleOutlined,
  CaretUpOutlined,
  CaretDownOutlined,
} from '@ant-design/icons';

import { history } from 'umi';

const moment = require('moment');

import { formAddressApi } from '../../../../../api/createActivity';
export default function (props) {
  const [form] = Form.useForm(); //  form 表单
  const [imageUrl, setImageUrl] = useState(''); // 活动 上传的图片，只存放一张图片地址 http://cmb.beyondsofthz.com/campus/image/946814542011305984.jpg
  const [imageUrl_2, setImageUrl_2] = useState(''); // 活动 上传的图片，只存放一张图片地址

  const [loading, setLoading] = useState(false); // 上传图片的
  const [loading_2, setLoading_2] = useState(false); // 上传图片的

  const normFile = (e) => {
    // 第一页 和 第二页 都需要
    // console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  const BtnAgain = () => {
    //  下一步+
    form
      .validateFields()
      .then((res) => {
        // console.log('下一步成功 拿到数据:', res);
        props.getBasicInfo(res); //  把拿到的数据 传递给  父组件
        props.btnNextStep(); //  下一步
      })
      .catch((err) => {
        console.log('err', err);
        message.error('请填写完成的信息!');
      });
  };

  const BtnPreview = () => {
    //  预览
    // console.log('预览', dayNameArr);
  };

  useEffect(() => {
    //  监听 activityEditData 变化，然后开始回填
    getActivityEdit();
  }, [props.activityEditData]);

  const getActivityEdit = async () => {
    if (
      props.activityEditData &&
      Object.keys(props.activityEditData).length > 0
    ) {
      // console.log('监听 activityEditData 变化', props.activityEditData);
      let editData = props.activityEditData;
      let newEditData = {
        activityName: editData.activityName, // 活动名称
        activityArea: [editData.provinceCode, editData.cityCode], // 选择地区

        activityTime: [moment(editData.startDate), moment(editData.endDate)], // 活动时间  开始
        activityPlace: editData.activitySite, // 活动地点
        activityOrganizer: editData.activityOrganizers, // 活动主办方
        activityContent: editData.activityContent, // 活动内容

        activityImg_1: [
          { uid: '-1', name: editData.pictureKey, url: editData.pictureUrl },
        ], // 活动图
        activityImg_2: [
          {
            uid: '-2',
            name: editData.thumbnailPictureKey,
            url: editData.thumbnailPictureUrl,
          },
        ], // 活动图
        scheduleName: editData.scheduleVOS.map((m) => ({
          dayName: m.scheduleName,
          dayTime: moment(m.scheduleDate),
          scheduleId: m.scheduleId,
          activityBasicId: m.activityBasicId,
        })),
      };

      await editFnLoadData([
        {
          label: editData.provinceName,
          parentId: editData.provinceCode,
        },
        {
          label: editData.cityName,
          parentId: editData.cityCode,
        },
      ]);

      setImageUrl(editData.pictureUrl); //  只显示  一张图片
      setImageUrl_2(editData.thumbnailPictureUrl); //  缩略图 只显示 一张
      await form.setFieldsValue(newEditData); //  回填 form 表单中的数据
    }
  };

  const BtnSaveDraft = () => {
    //  保存草稿
    console.log('保存草稿');
  };

  const handleChangeTextArea = (e) => {
    //  活动内容的  输入
    // console.log('textArea', e.target.value);
  };

  const handleChange = (info) => {
    //  上传图片的
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      getBase64(info.file.originFileObj, (imageUrl) => {
        setImageUrl(imageUrl);
        setLoading(false);
      });
    }
  };

  const handleChange_2 = (info) => {
    //  上传图片的 _ 2
    if (info.file.status === 'uploading') {
      setLoading_2(true);
      return;
    }
    if (info.file.status === 'done') {
      getBase64(info.file.originFileObj, (imageUrl_2) => {
        setImageUrl_2(imageUrl_2);
        setLoading_2(false);
      });
    }
  };

  //  级联 组件   ////////////////////////////////////////////
  const [options, setOptions] = useState([
    //  级联选择器
    {
      value: 'zhejiang---',
      label: 'Zhejiang+++',
      isLeaf: false,
    },
    {
      value: 'jiangsu///',
      label: 'Jiangsu***',
      isLeaf: false,
    },
  ]);

  const getAddressFn = async (addressLevel, parentId) => {
    return await formAddressApi({ addressLevel, parentId });
  };

  useEffect(() => {
    getAddressFn(1)
      .then((res) => {
        if (res.data.code === 200) {
          // console.log("一级地级市", res.data.data)
          let newArr = res.data.data.map((m) => ({
            value: m.addressCode,
            label: m.addressName,
            isLeaf: false,
            parentId: m.addressCode,
          }));
          setOptions(newArr);
        }
      })
      .catch((err) => console.log('err: 一级', err));
  }, []);

  const onChangeCascader = (value, selectedOptions) => {
    //选择完成后的回调
    // 级联选择器
    console.log(value, selectedOptions);
  };

  const loadData = (selectedOptions) => {
    // 用于动态加载选项
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    setTimeout(() => {
      targetOption.loading = false;
      getAddressFn(2, targetOption.parentId).then((res) => {
        targetOption.children = res.data.data.map((m) => ({
          label: m.addressName,
          value: m.addressCode,
        }));
        setOptions([...options]); //  这个 必须放在 调用  成功的 里面，不然 会出现 数据回填慢
      });
    }, 200);
  };

  const editFnLoadData = (arr) => {
    //  级联 第二个地名的  回填
    let parentId = arr[0].parentId;
    getAddressFn(2, parentId).then((res) => {
      let newOpions = JSON.parse(JSON.stringify(options));
      options.forEach((f, index) => {
        if (f.parentId == parentId) {
          newOpions[index].children = [];
          newOpions[index].children.push({
            label: arr[1].label,
            value: arr[1].parentId,
          });
          setOptions(newOpions);
        }
      });
    });
  };

  return (
    <div className="add_activity_basic_info">
      <div className="add_activity_basic_info_title">
        <div></div>
        <div> 请填写活动的基本信息 </div>
      </div>

      <div>
        <Form
          // name="basic"
          // labelCol={{ span: 8 }}
          // wrapperCol={{ span: 16 }}
          form={form}
          initialValues={{}}
          // onFinish={onFinish}
          // onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <div className="form_two_every">
            <div className="form_item">
              <Form.Item
                label="活动名称"
                name="activityName"
                rules={[{ required: true, message: '请输入活动名称' }]}
              >
                <Input placeholder="请输入活动名称" />
              </Form.Item>
            </div>

            <div className="form_item">
              <Form.Item
                label="选择地区"
                name="activityArea"
                rules={[{ required: true, message: '请选择地区' }]}
              >
                <Cascader
                  options={options}
                  loadData={loadData} // 用于动态加载选项
                  onChange={onChangeCascader} // 选择完成后的回调
                  placeholder="请选择活动所属地区"
                  style={{
                    width: '150px',
                  }}
                  changeOnSelect
                />
              </Form.Item>
            </div>
          </div>

          <div className="form_two_every">
            <div className="form_item">
              <Form.Item
                label="活动时间"
                name="activityTime"
                rules={[{ required: true, message: '请输入活动时间' }]}
              >
                <RangePicker showTime />
              </Form.Item>
            </div>

            <div className="form_item">
              <Form.Item
                label="活动地点"
                name="activityPlace"
                // rules={[{ required: true, message: '请输入活动地点' }]}
              >
                <Input placeholder="请输入活动地点" />
              </Form.Item>
            </div>
          </div>

          <div className="form_two_every">
            <div className="form_item">
              <Form.Item
                label="活动主办方"
                name="activityOrganizer"
                // rules={[{ required: true, message: '请输入活动时间' }]}
              >
                <Input placeholder="请输入活动主办方" />
              </Form.Item>
            </div>

            <div className="form_item">
              <Form.Item
                label="活动内容"
                name="activityContent"
                rules={[{ required: true, message: '请输入活动内容' }]}
              >
                <TextArea
                  placeholder="请输入活动内容"
                  allowClear
                  onChange={handleChangeTextArea}
                />
              </Form.Item>
            </div>
          </div>

          <div className="form_two_every_1">
            <div className="form_item_activity">
              <Form.Item
                label="活动图"
                name="activityImg_1"
                valuePropName="fileList"
                getValueFromEvent={normFile}
                rules={[{ required: true, message: '请上传活动图' }]}
              >
                <Upload
                  // name="avatar"
                  listType="picture-card" // 上传列表的内建样式
                  className="avatar-uploader"
                  // showUploadList={false} // 是否展示文件列表
                  action="/campus/campusweb/upload/pictureUpload" // 上传的地址
                  name="multipartFile"
                  // action={imageUrl} // 上传的地址
                  // beforeUpload={beforeUpload} // 上传文件之前的钩子，参数为上传的文件若返回 false 则停止上传
                  onChange={handleChange} // 必须设置，不然 上传的 图片就不切换了
                  maxCount={1} // 最大值 就是 一张 图片
                >
                  {imageUrl.length > 0 ? (
                    <img
                      src={imageUrl}
                      alt="avatar"
                      style={{ width: '100%' }}
                    />
                  ) : (
                    <div>
                      {loading ? <LoadingOutlined /> : <PlusOutlined />}
                      <div style={{ marginTop: 8, color: '#d3d3d3' }}>
                        添加图片
                      </div>
                    </div>
                  )}
                </Upload>
              </Form.Item>
              <span style={{ color: '#acacac', fontSize: '12px' }}>
                <InfoCircleOutlined style={{ color: '#ffb65a' }} />{' '}
                推荐尺寸：1035*261
              </span>
            </div>

            <div className="form_item">
              <Form.Item
                label="缩略图"
                name="activityImg_2"
                valuePropName="fileList"
                getValueFromEvent={normFile}
                rules={[{ required: true, message: '请上传缩略图' }]}
              >
                <Upload
                  // name="avatar"
                  listType="picture-card" // 上传列表的内建样式
                  className="avatar-uploader"
                  // showUploadList={false} // 是否展示文件列表
                  // action="https://www.mocky.io/v2/5cc8019d300000980a055e76"  // 上传的地址
                  // action={imageUrl_2} // 上传的地址
                  action="/campus/campusweb/upload/pictureUpload" // 上传的地址
                  name="multipartFile"
                  // beforeUpload={beforeUpload} // 上传文件之前的钩子，参数为上传的文件若返回 false 则停止上传
                  onChange={handleChange_2} // 这个 必须打开，不然 图片就不切换了
                  maxCount={1} //  最大值 就是显示一张 图片
                >
                  {imageUrl_2 ? (
                    <img
                      src={imageUrl_2}
                      alt="avatar"
                      style={{ width: '100%' }}
                    />
                  ) : (
                    <div>
                      {loading_2 ? <LoadingOutlined /> : <PlusOutlined />}
                      <div style={{ marginTop: 8, color: '#d3d3d3' }}>
                        添加图片
                      </div>
                    </div>
                  )}
                </Upload>
              </Form.Item>
              <span style={{ color: '#acacac', fontSize: '12px' }}>
                <InfoCircleOutlined style={{ color: '#ffb65a' }} />{' '}
                推荐尺寸：168*261
              </span>
            </div>
          </div>

          <div className="add_activity_basic_info_title">
            <div></div>
            <div>
              {' '}
              请编辑活动日程规划{' '}
              <span style={{ color: '#5b5e73', fontSize: '15px' }}>
                （可添加多条）
              </span>{' '}
            </div>
          </div>

          <div className="day_name">
            <div style={{ marginBottom: '16px' }}> 日程名称 </div>
            {/* 这边 需要 for 循环一下   删除以后有bug，换写法，换写法 */}
            {/* { dayNameArr.length > 0 && dayNameArr.map((item, index) => {
                    return (
                      <div className='day_name_time' key={index}>
                        <div>
                          <Input placeholder='请输入日程名称' onChange={(e) => {
                            let newItem = dayNameArr.filter((f, i) => f.id === item.id)[0]
                            newItem.inputVlaue = e.target.value   //  不需要 setDayNameInput  数据直接回填了，离谱
                          } } />
                        </div>
                        <div>
                          <DatePicker
                                // onChange={handleChangeDayTime} // 这一种方式 传不了 index
                                onChange={(date, dateString) => {
                                  let newItem = dayNameArr.filter((f, i) => f.id===item.id)[0]
                                  newItem.dayTime = dateString  // 这一种写法就是 离谱
                                }}
                                showTime
                                placeholder='请选择日程时间'
                          />
                        </div>
                        <DeleteOutlined
                          style={{color: "#da2a13", cursor: 'pointer'}}
                          onClick={() => {
                            let a = dayNameArr.filter((f) => f.id !== item.id)
                            setDayNameArr(JSON.parse(JSON.stringify(a)))
                          }}
                        />
                      </div>
                    )
                  }) }
                  <div className='day_name_add' onClick={() => {
                    setDayNameArr((a) => {
                      return a = a.concat({inputVlaue: "", dayTime: "", id: nanoid()})
                    })
                  }} > <PlusOutlined /> 添加 </div> */}

            <Form.List name="scheduleName">
              {(fields, { add, remove }) => (
                <>
                  {fields.map((field) => (
                    <Space key={field.key} align="baseline">
                      {/* 第一个 输入框 */}
                      <Form.Item
                        {...field}
                        label=""
                        name={[field.name, 'dayName']}
                        // rules={[{required: true, message: '请输入日程名称'}]}
                      >
                        <Input placeholder="请输入日程名称" />
                      </Form.Item>

                      {/* 第二个输入框 */}
                      <Form.Item
                        {...field}
                        label=""
                        name={[field.name, 'dayTime']}
                        // rules={[{ required: true, message: '请选择日程时间' }]}
                      >
                        <DatePicker
                          // onChange={handleChangeDayTime} // 这一种方式 传不了 index
                          onChange={(date, dateString) => {
                            // console.log("日期：", dateString)
                            // let newItem = dayNameArr.filter((f, i) => f.id===item.id)[0]
                            // newItem.dayTime = dateString  // 这一种写法就是 离谱
                          }}
                          showTime
                          placeholder="请选择日程时间"
                        />
                      </Form.Item>

                      <DeleteOutlined
                        style={{
                          color: '#da2a13',
                          cursor: 'pointer',
                          marginRight: '20px',
                        }}
                        onClick={() => {
                          return remove(field.name);
                        }}
                      />
                    </Space>
                  ))}

                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => add()}
                      block
                      icon={<PlusOutlined />}
                    >
                      添加
                    </Button>
                  </Form.Item>
                </>
              )}
            </Form.List>
          </div>

          <div className="footer_btn">
            <Button
              style={{
                background: '#1a257a',
                color: '#fff',
                borderRadius: '6px',
              }}
              onClick={BtnAgain}
            >
              {' '}
              下一步{' '}
            </Button>
            <Button
              style={{ borderRadius: '6px', margin: '0px 15px' }}
              onClick={BtnPreview}
            >
              {' '}
              预览{' '}
            </Button>
            <Button style={{ borderRadius: '6px' }} onClick={BtnSaveDraft}>
              {' '}
              保存草稿{' '}
            </Button>
          </div>
        </Form>
      </div>
    </div>
  );
}

function getBase64(img, callback) {
  //  上传图片
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

function beforeUpload(file) {
  //  上传 图片
  const isJpgOrPng =
    file.type === 'image/jpeg' ||
    file.type === 'image/png' ||
    file.type === 'image/jpg';
  if (!isJpgOrPng) {
    message.error('上传的文件只能是 JPG/PNG 格式的文件');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('图像必须小于2MB！');
  }
  return isJpgOrPng && isLt2M; // 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。
}
